// 列表首页

.home-nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
    .home-link{
        display: flex;
        width: 60%;
        .active{
            span{
                border-bottom: 2px solid #046DED;
            }
        }
        div{
            flex: 1;
            span{
                display: inline-block;
                color: #046DED;
            font-weight: bold;
            cursor: pointer;
            padding: 10px;
            }
        }
        margin-left: -100px;
    }
}
.banner-imgs{
    width: 100%;
}
.home-main{
    width: 1200px;
    margin: 0 auto;
    .project-search-tab{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .tab-list{
            display: flex;
            margin: 20px 0;
            div{
                margin: 0 20px;
                padding: 10px 30px;
                border-radius: 100px;
                font-weight: bold;
                cursor: pointer;
                &.active{
                    color: #ffffff;
                    background: linear-gradient(to right, #92C0FF, #3F92FF);
                }
            }
        }
        .home-search{
            .el-input{
                width:450px;
                line-height:40px;
                border-radius:20px;
                .el-input__wrapper{
                    border-top-left-radius: 100px;
                    border-bottom-left-radius: 100px;
                }
                .el-input-group__append{
                    border-top-right-radius: 100px;
                    border-bottom-right-radius: 100px;
                    width: 100px;
                    background:linear-gradient(to right, #92C0FF, #3F92FF);
                    color: #ffffff;
                    font-weight: bold;
                }
            }
        }
    }
    .project-list{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        
        .project-card{
            width: 100%;
            display: flex;
            justify-content: space-between;
            margin: 10px 0;
            :deep(.el-card__body){
                width: 100%;
            }
            .project-card-content{
                display: flex;
                justify-content: space-between;
                width: 100%;
            }
            .project-img{
                border-radius: 10px;
                overflow: hidden;
                background-size: cover;
                height: 174px;
                width: 275px;
                margin-right: 20px;
                background-position: center center;
            }
            .project-info{
                width: calc(100% - 500px);
                font-size: 14px;
                div{
                    margin: 8px 0;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 3;/*省略几行写几*/
                    -webkit-box-orient: vertical;
                    word-break: break-all;
                }
                .project-title{
                    font-weight: bold;
                    padding: 5px 0;
                    margin-top: 0;
                    cursor: pointer;
                    font-size: 16px;
                }
                .project-sum{
                        color: #a1a1a1;
                }
            }
            .project-enter{
                padding: 0 40px;
                display: flex;
                justify-content: center;
                align-items: center;
                border-left: 1px solid #e9e9e9;
                color: #046DED;
                font-weight: bold;
                width: 15%;
                span{
                    border-bottom: 1px solid #046DED;
                }
            }
        }
    }
    .course-list{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        .course-card{
            width: 23%;
            margin: 20px 1%;
            :deep(.el-card__body){
                width: 100%;
            }
            .course-card-content{
                width: 100%;
            }
            .course-img{
                cursor: pointer;
                border-radius: 10px;
                overflow: hidden;
                background-size: cover;
                height: 150px;
                width:100%;
                margin-right: 20px;
                background-position: center center;
            }
            .course-title{
                font-weight: bold;
                padding: 5px 0;
                margin-top: 0;
                cursor: pointer;
                font-size: 16px;
            }
            .course-info{
                width:100%;
                font-size: 14px;
                display: flex;
                justify-content: space-between;
                div{
                    margin: 8px 0;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 1;/*省略几行写几*/
                    -webkit-box-orient: vertical;
                    width: 50%;
                }
                
                .course-sum{
                        color: #a1a1a1;
                }
            }
            .course-enter{
                padding: 0 40px;
                display: flex;
                justify-content: center;
                align-items: center;
                border-left: 1px solid #e9e9e9;
                
            }
        }
    }
}
.ql-editor{
    height: auto !important;
}

@media (min-width: 1200px) {
    .home-main{
        width: 1200px;
    }
}

@media (min-width: 1920px) {
    .home-main{
        width: 1440px;
    }
}